<template>
  <div>
    <!-- 头部区域 -->
    <div class="rows">
      <el-card  class="ro">
<el-row>
  <el-col :span="24"><div>
    <el-form :inline="true"  :model="fun">
  <el-form-item label="区域搜索">
    <el-input v-model="RegSin.name" placeholder="请输入">
       <i slot="suffix" class="el-icon-circle-close" @click="suff"></i>
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="chaxun">查询</el-button>
  </el-form-item>
</el-form>
    </div>
    </el-col>
</el-row>
      </el-card>
    </div>

                <!-- 表格区域 -->
                <div class="op">
<el-card class="box-card" >
  <el-row>
  <el-col :span="24"><div>
    <el-button icon="el-icon-circle-plus" type="danger" @click="xinjian">新建</el-button>
    </div>
    </el-col>
    <el-dialog  title="提示" :visible="dialog"  width="40%" @close="number">
  <span slot="footer" class="dialog-footer">
    <el-form :model="numberValidateForm" ref="numberValidateForm" :rules="numberV" label-width="100px" >
  <el-form-item label="区域名称" prop="regionName">
    <el-input  maxlength="15"  show-word-limit v-model="numberValidateForm.regionName"></el-input>
  </el-form-item>
  <el-form-item label="备注说明" prop="remark">
    <el-input   type="textarea" v-model="numberValidateForm.remark" maxlength="40"  show-word-limit></el-input>
  </el-form-item>
         </el-form>
    <el-button @click="number">取消</el-button>
    <el-button type="primary" @click="qued">确 定</el-button>
  </span>
</el-dialog>
    <el-col>
       <el-table
       :data="tab"
      style="width: 100%">
      <el-table-column prop="index" label="序号" width="100">
        <template slot-scope="scope">
                    <span>{{ scope.$index + (RegSin.pageIndex - 1) * RegSin.pageSize + 1 }}</span>
                </template>
      </el-table-column>
      <el-table-column prop="name" label="区域名称" width="250"></el-table-column>
      <el-table-column prop="nodeCount" label="点位数" width="300"></el-table-column>
      <el-table-column prop="remark" label="备注说明" width="300"></el-table-column>
      <el-table-column  label="操作" width="180" >
        <template #default="{ row }">
          <div class="flx">
        <el-button type="text" size="small" @click="chakan(row)">查看详情</el-button>
        <el-button type="text" size="small" @click="bianji(row.id)">编辑</el-button>
        <el-button  type="danger" size="small"  @click="delRole(row.id)">删除</el-button>
          </div>
      </template>
      </el-table-column>
    </el-table>
    </el-col>
</el-row>
<el-dialog  title="区域详情" :visible="visbba"  width="42%" @close='visbbs'>
  <el-row>
  <el-col :span="24"><div>
    <el-descriptions>
  <el-descriptions-item label="区域名称">{{name}}</el-descriptions-item>
    </el-descriptions>
    </div></el-col>
    <el-col>
       <el-descriptions>
<el-descriptions-item label="包含点位">
       <el-table style="width: 100%" :data="aws">
      <el-table-column  type="index" label="序号"   width="150"></el-table-column>
      <el-table-column   prop="addr"   label="点位名称"  width="150"> </el-table-column>
      <el-table-column   prop="vmCount"   label="设备数量" width="150"></el-table-column>
    </el-table>
       </el-descriptions-item>
       </el-descriptions>

    </el-col>
</el-row>
</el-dialog>
<!-- 分页 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
           <el-button @click="shang">上一页</el-button>
           <el-button  @click="xia">下一页</el-button>
        </el-row>
</el-card>
                </div>

  </div>
</template>

<script>
import { Regin, ReginXin, ReginBian, delRole, updateRole, Nodes } from '@/api'
export default {
  data () {
    return {
      visbba: false,
      tab: [], // 表格渲染数据
      aws: [], // 查看详情数据
      RegSin: {
        pageIndex: 1,
        pageSize: 10,
        regionId: ''
      },
      total: 0, // 总页数
      dialog: false,
      numberValidateForm: {
        regionName: '',
        remark: ''
      },
      fun: {
        name: ''
      },
      numberV: {
        regionName: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      name: ''// 区域名称
    }
  },
  created () {
    this.reg()
  },
  methods: {
    // 查看详情
    async  chakan (row) {
      this.visbba = true
      const aw = await Nodes(this.RegSin)
      this.name = row.name
      this.aws = aw.data.currentPageRecords
    },
    visbbs () {
      this.visbba = false
    },
    async reg () {
      const re = await Regin(this.RegSin)
      this.tab = re.data.currentPageRecords
      this.total = Number(re.data.totalCount)
    },
    shang () {
      if (this.RegSin.pageIndex === 1) {
        return false
      } else {
        this.RegSin.pageIndex--
        this.reg()
      }
    },
    xia () {
      this.RegSin.pageIndex++
      this.reg()
    },
    // 查询
    chaxun () {
      this.RegSin.pageIndex = 1
      this.reg()
    },
    suff () {
      this.RegSin.name = ''
    },
    //  新建
    xinjian () {
      this.dialog = true
    },
    // 弹窗关闭
    number () {
      this.dialog = false
      this.$refs.numberValidateForm.resetFields() // 重置表单
      this.numberValidateForm = {
        regionName: '',
        remark: ''
      }
    },
    // 新建数据
    qued () {
      this.$refs.numberValidateForm.validate(async (valid) => {
        if (!valid) return
        if (this.numberValidateForm.id) {
          await updateRole(this.numberValidateForm)
        } else {
          await ReginXin(this.numberValidateForm)
        }
        // 3. 提示用户
        this.$message.success('新增角色成功')
        // 4. 关闭弹窗
        this.number()
        // 5. 刷新列表
        this.reg()
      })
    },
    // 编辑
    async bianji (regionId) {
      this.dialog = true
      const res = await ReginBian(regionId)
      // console.log(res)
      this.numberValidateForm.regionName = res.data.name
      this.numberValidateForm.remark = res.data.remark
    },
    // 删除
    delRole (id) {
      // 1. 询问用户
      this.$confirm('此操作将永久删除该区域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 2. 调用删除接口
        await delRole(id)
        // 3. 提示用户
        this.$message.success('删除角色成功')
        // 最后一页最后一条数据时，页数减 1
        if (this.tab.length === 1 && this.RegSin.pageIndex > 1) {
          this.RegSin.pageIndex--
        }
        // 4. 刷新列表
        this.reg()
      })
    }
  }
}
</script>

<style scoped lang="less">
.rows{
  padding: 10px;
  // height: 60px;
  .ro{
    padding: 5px;
  }
}

.op{
  padding: 10px;
  .box-card{
  padding: 5px;
  margin-top: 10px;
}
.flx{
  display: flex;
}
}

</style>
